<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试.html</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <hr>
    <h2>学生信息</h2>
    <button @click="addSex">添加性别属性默认是男</button>
    <h2>学生姓名：{{student.name}}</h2>
    <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
    <h2>学生年龄：真实年龄{{student.age.rAge}} 虚假年龄{{student.age.sAge}}</h2>
    <h2>朋友们</h2>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}}--{{f.age}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    // 关闭开发环境的警告提示
    Vue.config.productionTip = false
    // 创建vue的对象
    const vm = new Vue({
        el: '#root',
        data: {
            name: "jiale",
            address: "上海",
            student: {
                name: 'tom',
                // sex:"男",
                age: {
                    rAge: 40,
                    sAge: 18,
                },
                friends: [
                    {name: "jerry", age: 35},
                    {name: "je", age: 36}
                ]
            }
        },
        methods: {
            addSex() {
                // Vue.set(this.student, 'sex', "男")
                this.$set(this.student, 'sex', "男")
            }
        }
    })
</script>
</body>
</html>